<template>
    <!-- 商品详情界面 -->
    <div>
        <!-- 卡片视图区域 -->
      <el-card>
          <div slot="header">
              <span>宣传广告基本信息</span>
          </div>
          <el-form label-width="120px" :model="kfForm" ref="kfFormRef" :rules="kfFormRules">
              <el-form-item label-width="0px" prop="name">
                  <el-input placeholder="宣传广告图" v-model="kfForm.name">
                      <template slot="prepend">宣传广告图名称</template>
                  </el-input>
              </el-form-item>
              <el-form-item label="宣传图上传：" prop="headImg">
                  <el-upload
                      :action="uploadURL"
                      list-type="picture-card"
                      :class="{hide:hideUpload}"
                      name="files"
                      :on-preview="handlePreview"
                      :on-remove="remove"
                      :on-change="uploadChange"
                      :http-request="headUpload">
                      <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="previewVisible">
                      <img width="100%" :src="previewPath" alt="">
                  </el-dialog>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="certain">确 定</el-button>
                  <el-button type="primary" @click="clearAll">重 置</el-button>
              </el-form-item>
          </el-form>
      </el-card>
      <el-table height="350" border
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-table-column label="上下架" align="center">
          <template slot-scope="scope">
              <el-switch
                  class="switch"
                  v-model="scope.row.status"
                  :active-value="0"
                  :inactive-value="1"
                  active-text="上架"
                  inactive-text="下架"
              >
              </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import { imageUpload } from '../../api/index'
export default {
  components: {
  },
  data () {
    return {
      // 上传图片的URL地址
      uploadURL: '',
      previewPath: 'localhost:8080',
      previewVisible: false,
      codePath: '',
      codeVisible: false,
      hideUpload: false,
      hideCode: false,
      limitCount: 1,
      limitCode: 1,
      headImg: [], // 头像
      kfForm: {
        name: ''
      }, // 分佣弹框的表单对象
      // 表单校验规则
      kfFormRules: {
        name: [
          { required: true, message: '请输入宣传广告图名称', trigger: 'blur' }
        ],
        headImg: [
          {
            required: true,
            message: '请上传宣传广告图',
            trigger: 'change'
          }
        ]
      },
      headFile: '',
      headFileList: '',
      codeFile: '',
      codeFileList: ''
    }
  },
  methods: {
    headUpload (params) {
      let that = this
      let param = new FormData()
      param.append('files', params.file)
      imageUpload(param)
        .then(res => {
          that.headImg = []
          that.headImg.push(res.data.data)
        })
        .catch(failResponse => {})
    },
    codeUpload (params) {
      let param = new FormData()
      param.append('files', params.file)
    },
    // 处理图片预览效果
    handlePreview (file) {
      this.previewPath = file.url
      this.previewVisible = true
    },
    remove (file, fileList) {
      if (fileList.length === 0) {
        this.kfFormRules.headImg = [
          {
            required: true,
            message: '请上传宣传广告图',
            trigger: 'change'
          }
        ]
      }
      this.hideUpload = fileList.length >= this.limitCount
    },
    uploadChange (file, fileList) {
      this.headFile = file
      this.headFileList = fileList
      if (fileList.length === 1) {
        let {headImg, ...data} = this.kfFormRules
        this.kfFormRules = data
      }
      this.$refs.kfFormRef.clearValidate('headImg')
      this.hideUpload = fileList.length >= this.limitCount
    },
    // 处理图片预览效果
    codePreview (file) {
      this.codePath = file.url
      this.codeVisible = true
    },
    codeChange (file, fileList) {
      this.codeFile = file
      this.codeFileList = fileList
      if (fileList.length === 1) {
        let {codeImg, ...data} = this.kfFormRules
        this.kfFormRules = data
      }
      this.$refs.kfFormRef.clearValidate('codeImg')
      this.hideCode = fileList.length >= this.limitCode
    },
    certain () {
      console.log('dd', this.kfFormRules)
      this.$refs.kfFormRef.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    clearAll () {
      this.$refs.kfFormRef.resetFields()
      if (this.headFileList.length > 0) {
        this.headFileList.splice(0, 1)
        this.remove(this.headFile, this.headFileList)
      }
      if (this.codeFileList.length > 0) {
        this.codeFileList.splice(0, 1)
        this.codeRemove(this.codeFile, this.codeFileList)
      }
    }

  },
  mounted () {

  }
}
</script>

<style scoped>
    .writeBox {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      margin-bottom: 20px;
    }
    .el-row {
      width: 30%;
      margin-right: 10px;
      margin-bottom: 8px;
    }
    .el-col {
      white-space: nowrap;
    }
    .el-form-item .el-input {
      width:400px;
      margin-right: 10px;
    }
    /* switch按钮样式 */
    .switch .el-switch__label {
      position: absolute;
      display: none;
      color: #fff !important;
    }
    /*打开时文字位置设置*/
    .switch .el-switch__label--right {
      z-index: 1;
    }
    /* 调整打开时文字的显示位子 */
    .switch .el-switch__label--right span{
      margin-right: 9px;
    }
    /*关闭时文字位置设置*/
    .switch .el-switch__label--left {
      z-index: 1;
    }
    /* 调整关闭时文字的显示位子 */
    .switch .el-switch__label--left span{
      margin-left: 9px;
    }
    /*显示文字*/
    .switch .el-switch__label.is-active {
      display: block;
    }
    /* 调整按钮的宽度 */
    .switch.el-switch .el-switch__core,
    .el-switch .el-switch__label {
        width: 70px !important;
        margin: 0;
    }
</style>
